*{
    padding: 0px;
    margin: 0px;
    list-style: none;
}
.body{
    width: 100%;
    height: 2000px;
    
}
.body-top{
    width: 1530px;
    height: 800px;
    background: url(../img/icon_bg_page1.jpg) no-repeat  0 0 / 200% 100%;
    
}
.body-top-2{
height: 50px;
}
.body-top-1{
    width: 1300px;
    height: 50px;
    margin: 0px auto;
    
    
    
    
}
.body-left{
    width: 210px;
    height: 45px;
    float: left;
    

    background: url(../img/logo.png) no-repeat center;
}
.body-right{
    width: 620px;
    height: 50px;
    float: right;
    display: flex;
    justify-content: space-between;
    line-height: 50px;
    position: relative;
    cursor: pointer;
    color: #fff;
}
.body-shouye{
    font-size: 14px;
    margin: 0px 10px 0px;
    
    
}
.body-shouye img{
    width: 16px;
    height: 16px;
}
.body-shouye-w{
    width: 10px;
    height: 6px;
    background: url(../img/arrow_down.png) no-repeat ;
}
.body-shouye-a{
    position: absolute;
    display: none;
    width: 102px;
    height: 124px;
    background: url(../img/qrcode.png) no-repeat 0 0/100%100%;
}
.body-shouye-n:hover .body-shouye-a{
    display: block;
}
.shneg{
    width: 649px;
    height: 500px;
    margin: 0px auto;
   
}
.shneg-a{
    width: 649px;
    height: 188px;
    
    position: relative;
}
.shneg-b{
    width: 108px;
    height: 125px;
    background: url(../img/t015d76ba438d87d444.png) no-repeat 0 0/100% 100%;
    
    position: absolute;
    left: calc(50% - 62px);
    top: 60px;
    
}
.shneg-c{
    width: 108px;
    height: 125px;
    left: calc(50% - 62px);
    background: url(../img/t01af6663e6b2f2cf4e.png) no-repeat 0 0/ 100%100%;
    position: absolute;
    
}
.shneg-d{
    width: 54px;
    height: 65px;
    top: 35px;
    left: 290px;;
    position: absolute;
    background: url(../img/t017337a546f51cd7b4.png) no-repeat 0 0/100% 100%; 
}
/* .dd{
    width: 649px;
    
    border: 1px solid salmon;
} */
.d1{
    position: absolute;
    top: 80px;
    width: 12px;
    height: 12px;
    left: 290px;
    animation: move 2s linear infinite;
    background: url(../img/t016fbefba194387a00.png) no-repeat 0 0/100%100%;
}
@keyframes move{
    0% {
        transform: translateY(0px);
    }
    20%{
        transform: translateY(-5px);
    }
    100%{
        transform: translateY(-50px);
    }
}
.d2{
    position: absolute;
    top: 80px;
    width: 12px;
    height: 12px;
    left: 300px;
    animation: move2 2s 0.5s linear infinite;
    background: url(../img/t016fbefba194387a00.png) no-repeat 0 0/100%100%;
}
@keyframes move2{
    0% {
        transform: translateY(0px);
    }
    20%{
        transform: translateY(-5px);
    }
    100%{
        transform: translateY(-50px);
    }
}
.d3{
    position: absolute;
    top: 80px;
    width: 12px;
    height: 12px;
    left: 310px;
    animation: move3 2s 1s linear infinite;
    background: url(../img/t016fbefba194387a00.png) no-repeat 0 0/100%100%;
}
@keyframes move3{
    0% {
        transform: translateY(0px);
    }
    20%{
        transform: translateY(-5px);
    }
    100%{
        transform: translateY(-50px);
    }
}
.d4{
    position: absolute;
    top: 80px;
    width: 12px;
    height: 12px;
    left: 320px;
    animation: move4 1.5s 1.1s linear infinite;
    background: url(../img/t016fbefba194387a00.png) no-repeat 0 0/100%100%;
}
@keyframes move4{
    0% {
        transform: translateY(0px);
    }
    20%{
        transform: translateY(-5px);
    }
    100%{
        transform: translateY(-50px);
    }
}
.xia{
    width: 462px;
    height: 109px;
    margin: 0px auto;
    margin-top: 30px;
    background: url(../img/t01fa494f80b7b4098b.png) no-repeat 0 0/100%100%;
}
.sj1{
    width: 650px;
    height: 33px;
    margin-top: 30px;
    
}
.sj{
    width: 134px;
    height: 32px;
    float: left;
    margin-left: 180px;
    background: url(../img/download_phone_btn.png) no-repeat 0 0/100%100%;
}
.sj2{
    width: 134px;
    height: 32px;
    float: right;
   margin-right: 180px;
    background: url(../img/download_pc_btn.png) no-repeat 0 0/100%100%;
}
.hai{
    width: 1530px;
    height: 500px;
    background-color: #fff;
}
.hai1{
    width: 649px;
    height: 500px;
    margin: 0px auto;
    
    margin-top: 80px;
}
.hai2{
    position: relative;
    width: 505px;
    height: 148px;
    margin: 0px auto;
    
    margin-top: 150px;
    background: url(../img/t013fa6edf830f0dbba.png) no-repeat 0 0/100%100%;
}
.wb{
    position: absolute;
    width: 55px ;
    height: 45px;
    left: -35px;
    top: 20px;
    background: url(../img/index.png) no-repeat 0 0/100%100%;
    animation: wb1 1s infinite linear;
}
@keyframes wb1{
    0%{
        transform: translate(0);
    }
    40% {
        transform: translate(4px,-2px)
    }
    80% {
        transform: translate(4px,3px)
    }
    100% {
        transform: translate(0)
    }
}
.w{
    width: 17px;
    height: 16px;
    position: absolute;
    left: 100px;
    top: 10px;
    background: url(../img/index1.png) no-repeat 00 /100%100%;
    animation:  w 1.2s infinite linear;
}
@keyframes w{
    0%{
        transform: translate(0);
    }
    40% {
        transform: translate(4px,-2px)
    }
    80% {
        transform: translate(4px,3px)
    }
    100% {
        transform: translate(0)
    }
}
.w3{
    position: absolute;
    left: 140px;
    top: 55px;
    width: 12px;
    height: 13px;
    background: url(../img/index2.png) no-repeat 0 0/100%100%;
    animation:  w3 1.2s infinite linear;
}
@keyframes w3{
    0%{
        transform: translate(0);
    }
    40% {
        transform: translate(2px,-2px)
    }
    80% {
        transform: translate(2px,-10px)
    }
    100% {
        transform: translate(0)
    }
}
.w4{
    position: absolute;
    left: 30px;
    top: 40px;
    width: 251px;
    height: 116px;
    background: url(../img/inde3.png) no-repeat 00/100%100%;
}
.w5{
    position: absolute;
    height: 74px;
    width: 100px;
    left: 180px;
    top: 100px;
    background: url(../img/index4.png) no-repeat 00/100%100%;
    animation: w5 1s infinite linear alternate;
    transform-origin: top;
}
@keyframes w5{
    from{
        transform: rotate(0deg);
    }
    to{
        transform: rotate(5deg);
    }
    
}
.w6{
    position: absolute;
    left: 160px;
    top: 35px;
    width: 16px;
    height: 16px;
    background: url(../img/index6.png) no-repeat 0 0/100%100%;
    animation:  w6 1.2s infinite linear;
}
@keyframes w6{
    0%{
        transform: translate(0);
    }
    40% {
        transform: translate(2px,-2px)
    }
    80% {
        transform: translate(2px,-5px)
    }
    100% {
        transform: translate(0)
    }
}

/* 兴趣推荐 */
.xin{
    width: 1530px;
    height: 500px;
    
}
.xin-a{
    position: relative;
    width: 650px;
    height: 500px;
    margin: 0px auto;
}
.yue{
    position: absolute;
    top: -10px;
    left: 130px;
    width: 68px;
    height: 50px;
    background: url(../img/index7.png) no-repeat 00/100% 100%;
    animation: yue 1s infinite linear;
}
@keyframes yue{
    0%{
        transform: translate(0);
    }
    40%{
        transform: translate(-5px,-8px);
    }
    80%{
        transform: translate(5px);
    }
    100%{
        transform: translate(0px);
    }
}
.xinqu{
    width: 458px;
    height: 174px;
    background: url(../img/t01010ab7ea1ba3d43a.png) no-repeat 0 0/100%100%;
}
.fen{
    width: 70px;
    height: 50px;
    position: absolute;
    top: 100px;
    left: -50px;
    background: url(../img/index8.png) no-repeat 0 0/100% 100%;
    animation: fen 2s infinite linear;
}
@keyframes fen{
    0%{
        transform: translate(0);
    }
    20%{
        transform: translate(5px,-5px);
    }
    50%{
        transform: translate(-5px);
    }
    70%{
        transform: translate(5px);
    }
    100%{
        transform: translate(0);
    }
}
.nv{
    width: 286px;
    height: 128px;
    background: url(../img/index9.png) no-repeat 0 0/100%100%; 
    animation: nv 2s infinite linear;
}
@keyframes nv{
    0%{
        transform: translate(0);
    }
    40%{
        transform: translate(4px,-3px);
    }
    70%{
        transform: translate(3px);

    }
    100%{
        transform: translate(0);
    }
}
.h{
    width: 60px;
    height: 40px;
    background: url(../img/index10.png) no-repeat 0 0/100%100%;
    position: absolute;
    left: 270px;
    animation: h 1s infinite linear;
}
@keyframes h{
    0%{
        transform: translate(0);
    }
    20%{
        transform: translate(5px,-5px);
    }
    50%{
        transform: translate(-5px);
    }
    70%{
        transform: translate(5px);
    }
    100%{
        transform: translate(0);
    }
}
.quan{
    width: 1530px;
    height: 500px;
    
}
.quan-a{
    width: 650px;
    height: 500px;
    margin: 0px auto;
    position: relative;
    
    
}
.qing{
    width: 1200px;
    height: 500px;
    margin: 0px auto;
    background: url(../img/t01d47a363b37cc3035.png) no-repeat 0 0/100%100%;
}
.s{
    position: absolute;
    top: 180px;
    width: 78px;
    left: 40px;
    height: 46px;
    background: url(../img/index11.png) no-repeat 00/100%100%;
}
.yuan{
    position: absolute;
    width: 74px;
    height: 63px;
    left: 180px;
    top: 130px;
    background: url(../img/index12.png) no-repeat 0 0/100%100%;
}
.yuan1{
    position: absolute;
    width: 74px;
    height: 63px;
    left: 270px;
    top: 150px;
    background: url(../img/index13.png) no-repeat 0 0/100%100%;
}
.ren{
    position: absolute;
    top: 150px;
    width: 505px;
    left: 50px;
    height: 208px;
    background:url(../img/t014bb94cd860885c6d.png) no-repeat 0 0/100%100%;
}
.sz{
    position: absolute;
    width: 16px;
    height: 4px;
    left: 170px;
    top:83px;
    background: url(../img/index14.png) no-repeat 0 0/100%100%;
    animation: sz 1s infinite linear;
}
@keyframes sz{
    0%{
        transform: rotate(10);
    }
    50%{
        transform: rotate(20deg);
    }
    100%{
        transform: rotate(10);
    }
}
.jz{
    position: absolute;
    top: 190px;
    left: 197px;
    width: 17px;
    height: 9px;
    background: url(../img/index15.png) no-repeat 0 0/100%100%;
    animation: jz 1s infinite linear;
}
@keyframes jz{
    0%{
        transform: rotate(0);
    }
    50%{
        transform: rotate(10deg);
    }
    100%{
        transform: rotate(0);
    }
}
.ben{
    width: 25px;
    height: 21px;
    background: url(../img/index16.png) no-repeat 0 0/100%100%;
    position: absolute;
    left: 230px;
    top: 170px;
}
.hw{
    position: absolute;
    left: 245px;
    top: 129px;
    width: 25px;
    height: 44px;
    background: url(../img/index17.png) no-repeat 0 0/100%100%;
    animation: hw 1s infinite linear;
}
@keyframes hw{
    0%{
        transform: rotate(0);
    }
    50%{
        transform: rotate(-3deg);
    }
    100%{
        transform: rotate(0);
    }
}
.hw-a{
    position: absolute;
    left: 230px;
    top: 129px;
    width: 25px;
    height: 44px;
    background: url(../img/index18.png) no-repeat 0 0/100%100%;
    animation: hw1 1s infinite linear;
}
@keyframes hw1{
    0%{
        transform: rotate(0);
    }
    50%{
        transform: rotate(-3deg);
    }
    100%{
        transform: rotate(0);
    }
}
.hw-b{
    position: absolute;
    left: 230px;
    top: 129px;
    width: 25px;
    height: 44px;
    background: url(../img/index19.png) no-repeat 0 0/100%100%;
    animation: hw2 1s infinite linear;
}
@keyframes hw2{
    0%{
        transform: rotate(0);
    }
    50%{
        transform: rotate(-3deg);
    }
    100%{
        transform: rotate(0);
    }
}
.jing{
    width: 1530px;
    height: 500px;


}
.jing-a{
    
    width: 1200px;
    height: 500px;
    margin: 0px auto;
    background: url(../img/t01d47a363b37cc3035.png) no-repeat 0 0/100%100%;
}
.jing-c{
    position: relative;
    width: 650px;
    height: 500px;
    margin: 0px auto;
    
}
.shi{
    position: absolute;
    top: 130px;
    left: 150px;
    width: 487px;
    height: 188px;
    background: url(../img/t019849054a6201233d.png) no-repeat 0 0/100%100%;

}
.nan{
    position: absolute;
    top: 150px;
    left: 150px;
    width: 156px;
    height: 153px;
    background: url(../img/index20.png) no-repeat 0 0/100%100%;

}
.sd{
    position: absolute;
    top: 180px;
    left: 300px;
    width: 65px;
    height: 99px;
    background: url(../img/index21.png) no-repeat 0 0/100%100%;
    animation: sd 1s infinite linear;

}
@keyframes sd{
    0%{
        transform: rotate(0);
        
    }
    40%{
        transform: rotate(-3deg);
    }
    80%{
        transform: rotate(3deg);
    }
    100%{
        transform: rotate(0);
    }
}